<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Websocket</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <button onclick="sendMessage()">发送消息</button>
    <div id="socket">

    </div>
</body>

<script type="application/javascript">
    console.log("execute js...")
    let socket = new WebSocket('ws://127.0.0.1:8000/websocket');
    socket.onmessage = function (event){
        let data = event.data;
        console.log("received data: " + data);
        let text = $("#socket").text();
        $("#socket").text(text + "\n" + event.data)
    }

    socket.onclose = function (event){
        console.log("socket close...")
    }

    function sendMessage(){
        console.log("client send message ....")
        socket.send("this is client message");
    }


</script>
</html>